$(function() {
	
	
	
	
	//获取 当前选中  京东     华北   的id
	var shopId = $("#navGo>div>a:nth-of-type(1)").attr("data-Id");
	var areaId = $("#navGo>div>a:nth-of-type(2)").attr("data-Id");
	
	
	// 这里用的方法 是给导航栏添加一个定位的盒子 width 100%  height自然撑开
	// 盒子里没有数据的时候 height即为0 达到隐藏效果
	// 盒子有数据的时候 height 自然撑开 达到显示效果
	
	
	
	
	//恶心的点击事件
	// 这个太麻烦 能理解就理解 不能理解就算了
	
	
	
	
	//设置flag1 用于判断 第一个按钮是否已经点击过
	var flag1 = true
	$("#navGo>div>a:nth-of-type(1)").click(function() {
		//判断是否点击过 true 即 没点击过 进入 ajax
		if(flag1) {
			// 标记  导航栏第一个按钮已经点击过
			flag1 = false;	
			// 设置  导航栏第二个按钮可以点击获取ajax	往下看就知道为什么了
			flag = true;
			$.ajax({
				type: "get",
				dataType: "json",
				url: "http://127.0.0.1:3000/api/getgsshop",
				success: function(data) {
					var html = template("navGet", data);
					//先清空 ul 下面的   li
					//在生成动态生成 新的li
					$("#Goget").html(" ");
					$("#Goget").html(html);
					$.each($("#Goget>ul>li"), function(i,e) {
						// 用数组切割的方法截取获取当前已经获取到下拉栏的值 	与    导航栏已经选中值	进行判断  把相同那个li后面红色的√  显示
						if($(e).html().split(" ")[0] == $("#navGo>div>a:nth-of-type(1)").html()){
							$(e).children("span").css({
							"display": "block"
							})
						}
					});
					//把li绑定时 点击事件
					$("#Goget>ul>li").click(function() {
						//获取当前li 的    id
						var id = $(this).attr("data-shopId");
						//分割字符串
						var html = $(this).html().split(" ")[0];
						//把当前li 的id 设置到第一个按钮上 
						$("#navGo>div>a:nth-of-type(1)").attr("data-Id", id);
						//设置第一个按钮的 html
						$("#navGo>div>a:nth-of-type(1)").html(html);
						// 红色√ 的显示隐藏
						$("#Goget>ul>li>span").css({
							"display": "none"
						})
						$(this).children("span").css({
							"display": "block"
						})
					})
				}
			})
		} else {
			// flag1 = false;	被点击过的话  把动态生成的li 清空
			$("#Goget").html(" ");
			flag1 = true;
		}
	})
	//设置flag 用于判断 第二个按钮是否已经点击过
	var flag = true;
	$("#navGo>div>a:nth-of-type(2)").click(function() {
		if(flag) {
			// 标记  导航栏第一个按钮已经点击过
			flag = false;
			// 设置第一个 按钮点击可以获取ajax
			// 如果不设置 无法实现 当前按钮点击生成的ajax后 	再点击另一个按钮 从新生成新	ajax	和再次点击另一个  清空 ul 下的li 实现隐藏 
			// 这里的逻辑 比较绕  可以吧它先注释掉 看效果 在进行理解
			flag1 = true;
			$.ajax({
				type: "get",
				dataType: "json",
				url: "http://127.0.0.1:3000/api/getgsshoparea",
				success: function(data) {
					var html = template("navGet1", data);
					//先清空 ul 下面的   li
					//在生成动态生成 新的li
					$("#Goget").html(" ");
					$("#Goget").html(html);
					$.each($("#Goget>ul>li"), function(i,e) {
						// 判断同第一个按钮
						if($(e).html().split(" ")[0] == $("#navGo>div>a:nth-of-type(2)").html()){
							$(e).children("span").css({
							"display": "block"
							})
						}
					});
					
					//同上
					$("#Goget>ul>li").click(function() {
						var id = $(this).attr("data-areaid");
						var html = $(this).html().split(" ")[0];
						$("#navGo>div>a:nth-of-type(2)").attr("data-Id", id);
						$("#navGo>div>a:nth-of-type(2)").html(html);
						$("#Goget>ul>li>span").css({
							"display": "none"
						})
						$(this).children("span").css({
							"display": "block"
						})
					})
				}
			})
		} else {
			//同上
			$("#Goget").html(" ");
			flag = true;
		}
	})
	//默认首页加载数据
	$.ajax({
		type: "get",
		url: "http://127.0.0.1:3000/api/getgsproduct",
		async: true,
		dataType: "json",
		data: {
			shopid: shopId,
			areaid: areaId
		},
		success: function(data) {
			var html = template("menuGet", data);
			$("#menu").html(html);
		}
	});
	// 该事件是监听元素里的html 如果发生变化即触发
	// 给俩个按钮 同时绑定该事件  不管哪个按钮里的 值 发生变化都会 触发  从而到达 选中后 生成新的页面
	// 对应 58行 和  109 行 动态变换按钮里的值
	$("#navGo>div>a").bind("DOMNodeInserted", function() {
		console.log(1)
		shopId = $("#navGo>div>a:nth-of-type(1)").attr("data-Id");
		areaId = $("#navGo>div>a:nth-of-type(2)").attr("data-Id");
		console.log(shopId + "======" + areaId)
		$.ajax({
			type: "get",
			url: "http://127.0.0.1:3000/api/getgsproduct",
			async: true,
			dataType: "json",
			data: {
				shopid: shopId,
				areaid: areaId
			},
			success: function(data) {
				var html = template("menuGet", data);
				$("#menu").html(html);
			}
		});
	});
})